<template>
	<view :class="[index==0?'flex flex-column vh100 w100':'']">
		<view :class="[tabList.length>1?'u-flex-1':'u-flex-1',' gray-1 w100']"  :style="'padding-top:'+height+'px;'">
		<!-- @click="getCity" -->
			<view :class="['center','relative',tabList.length>1?'pd-20':'pd-40']" >
				<view class="absolute" @click.stop="toMy"  style="width: 140rpx;height: 80rpx;left: 50rpx; top: 50%;transform: translateY(-50%);">
					<image :src="token || tok ? imgUrl+info.avatar : '../../static/home-user.png'"  style="width:80rpx;height:80rpx;"
					 mode="">
					 </image>
					 
					  <image class="loginState" :class="tok ? 'hide': ''"  src="../../static/wlogin.png" ></image>
					<!-- <view class=" bold text-center  loginState">
					 	{{token?'':'未登录'}}
					 </view> -->
				</view>
				<view class="size-34 mr-10">飞驰代驾</view>
				<!-- <u-icon name="arrow-down"></u-icon> -->
			</view>
		</view>
		<view class="u-flex-8 w100" v-show="current==0"  style="height: 600rpx;" @click="toAnquan">
			<map v-if="false" style="width: 100%; height: 100%;position: relative;" :enable-traffic="true" :latitude="latitude" :longitude="longitude" :markers="covers"
			 :polyline="polyline">
				<cover-image class="" @click="toAnquan" style="width: 210rpx;height: 80rpx;position: absolute;bottom: 140rpx;left: 30rpx;"
				 src="../../static/anquan.png"></cover-image>
				<!-- <cover-image @click="toDetail" v-if="list.length>0&&list[0].status==0" class="" style="width: 100%;height: 120rpx;position: absolute;bottom: -10rpx;left: 0rpx;"
				  src="../../static/home-1.png"></cover-image>
				 <cover-image @click="toDetail" v-if="list.length>0&&(list[0].status==1||list[0].status==5)" class="" style="width: 100%;height: 120rpx;position: absolute;bottom: -10rpx;left: 0rpx;"
				  src="../../static/home-2.png"></cover-image> 
				<cover-image @click="toDetail" v-if="list.length>0&&list[0].status==4" class="" style="width: 100%;height: 120rpx;position: absolute;bottom: -10rpx;left: 0rpx;"
				 src="../../static/home-3.png"></cover-image>
				 <cover-image @click="toDetail" v-if="list.length>0&&list[0].status==2" class="" style="width: 100%;height: 120rpx;position: absolute;bottom: -10rpx;left: 0rpx;"
				 src="../../static/home-4.png"></cover-image>
				<cover-image @click="toDetail" v-if="list.length>0&&list[0].status==3" class="" style="width: 100%;height: 120rpx;position: absolute;bottom: -10rpx;left: 0rpx;"
				 src="../../static/home-5.png"></cover-image>
				<cover-view v-if="showTime" @click="showTime=false" style="width: 100%;height: 100%;background-color: rgba(0,0,0,.7);"></cover-view> -->
			</map>
		</view>
		<view class="u-flex-4 w100" v-show="current==0">
			<indexAddress :location="longitude+','+latitude" @close="showTime=false" @showTime="showTime=true" :other="other"
			 :showTime="showTime" :city="city"></indexAddress>
		</view>
		<u-popup v-model="redShow" mode="center" height="670" width="485" >
			<view >
				<image src="../../static/red.png" style="width:485rpx;height:607rpx;" @click.stop="getDraw"  mode=""></image>
				<view class="" style="width: 50rpx;margin: auto;">
					<image @click="redShow = false" style="width: 50rpx;height: 50rpx;" src="../../static/xx.png" mode=""></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import amapFile from '../../libs/amap-wx.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				index: 0,
				current: '',
				
				timer3: null,
				other: {}, //代人叫车
				list: [],
				hylist:[],
				timer: null,
				showTime: false,
				// 地图
				amapPlugin: null,
				key: 'bb6f4ed802756f963b37c184ce4e9766',
				latitude: '',
				longitude: '',
				polyline: [],
				qrCodeUrl:'',
				qrCodeUrl1:'',
				qrCodeUrl2:'',
				uid:'',
				// 新加红包
				redShow:false,
				redId:'',
				redName:true,
				info:{},
				tok:''
			}
		},
		computed: {
			...mapState(['userInfo', 'token','city', 'height', "start", "tabList","sjId","djId"]),
			covers() {
				return [{
					id: 1,
					latitude: this.latitude,
					longitude: this.longitude,
					iconPath: '../../static/now.png',
					title: '当前位置',
					width: 25,
					height: 25,
				}]
			}
		},
		//分享
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '飞驰代驾',
				path: '/pages/home/index'
			}
		},
	
		onLoad(e) {
			// 查看是否是代叫员或司机专属码
			// const scene = decodeURIComponent(e.scene);
			// this.qrCodeUrl = scene
			// const name = scene.split("=")[0]
			// this.uid = name
			// if (scene.substring(6, scene.length)) {
			// 	const uId = scene.substring(6, scene.length);
			// 	if(name == "sj_id"){
			// 		this.$store.commit('getsjId', uId)
			// 	}else if(name == "dj_id"){
			// 		this.$store.commit('getdjId', uId)
			// 	}
			// }
			
			uni.$on('other', (data) => {
				this.other = data
			})
		},
		onHide() {
			clearInterval(this.timer)
			this.timer = null
		},
		onUnload() {
			uni.$off('other')
			clearInterval(this.timer)
			this.timer = null
		},
		onShow() {
			this.info = uni.getStorageSync('userInfo')
			this.tok = uni.getStorageSync('token')
			// this.getRed()
			// // 定位
			// this.amapPlugin = new amapFile.AMapWX({
			// 	key: this.key
			// });
			
			// this.getRegeo()
			// this.timer = setInterval(() => {
			// 	this.getList()
			// }, 10000)
		},
		methods: {
			// 新人红包显示
			getRed(){
				this.$http('/addons/ddrive/user/couponList', {}, "POST").then(data => {
					console.log(data,"红包")
					if(data.status == 0 && data.data != ""){
						this.redId = data.data.id
						this.redShow = true
					}else {
						this.redShow = false
					}
				})
			},
			//领取新人红包
			getDraw(){
				
				if(this.redName == true){
					this.redName = false
					this.$http('/addons/ddrive/user/sendCoupon', {id:this.redId}, "POST").then(data => {
						console.log(data,"走走")
						uni.showToast({
							title:"新人红包领取成功！",
							icon:"none"
						})
						setTimeout(()=>{
							this.redShow = false
						},500)
					}).catch(data=>{
							this.redName = true
					})
				}
				
			},
			getList() {
				this.$http('/addons/ddrive/order/order_taking', {}, "POST").then(data => {
					console.log(data)
					this.list = data.data
					// this.hylist = data.hy
					// this.list = data
					// this.hylist = data.hy
				})
			},
			toDetail() {
				if (this.list.length == 1) {
					uni.navigateTo({
						url: '/pages/home/detail?id=' + this.list[0].id
					})
				} else {
					uni.navigateTo({
						url: '/pages/my/order/dj-order'
					})
				}
			},
			toAnquan() {
				uni.navigateTo({
					url: '/pages/home/security'
				})
			},
			change(index) {
				this.index = index;
				this.current = this.tabList[index].id;
				if(this.current == 2){
					uni.$emit('price')
				}
			},
			toMy() {
				uni.navigateTo({
					url: '/pages/my/index'
				})
			},
			getCity() {
				uni.navigateTo({
					url: '/pages/home/city'
				})
			},
			// 获取定位
			getRegeo() {
				let _this = this
				uni.showLoading({
					title: '获取定位信息中'
				});
				this.amapPlugin.getRegeo({
					success: (data) => {
						if (!_this.city) {
							let city = data[0].regeocodeData.addressComponent.city
							_this.$store.commit('getCity', city)
						}
						_this.latitude = data[0].latitude
						_this.longitude = data[0].longitude
						if (!_this.start.name) {
							let start = {
								city: data[0].regeocodeData.addressComponent.city,
								latitude: data[0].latitude,
								longitude: data[0].longitude,
								address: data[0].name,
								name: data[0].desc,
								flag: true
							}
							_this.$store.commit('getStart', start)
						}
						uni.hideLoading();
					},
					fail: (msg) => {
						uni.showToast({
							title: '没有开启位置权限',
							icon: 'none'
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loginState{
		position: absolute;
		left:-10rpx;
		bottom:-6rpx;
		color:#5E5A75;
		border:2rpx solid #fff;
		font-size:20rpx;
		border-radius: 40rpx;
		width:90rpx;
		height:36rpx;
	}
	.tripState{
		// padding:0rpx 40rpx;
		background:#FFF3D9;
		color:#FFAE00;
		
		.btnState{
			background:#FFAE00;
			border-radius: 12rpx;
			color:#fff;
			padding:10rpx 20rpx;
		}
	}
	/deep/.u-mode-center-box{
		background:none !important;
	}
</style>
